<template>
  <div class="cropper-image-upload-page">
    <div
      class="cropper-image"
      @click="chooseImage"
      @mouseenter="mouseenterHandler"
      @mouseleave="mouseleaveHandler"
    >
      <i v-if="!imgUrl" class="el-icon-plus"></i>
      <img v-else :src="imgUrl" alt="裁剪图片" />
      <div v-show="imgUrl && maskShow" class="mask">
        <i @click.stop="clearImg" class="el-icon-delete"></i>
      </div>
      <input type="hidden" v-model="imgUrl" placeholder="请选择图片" />
    </div>
    <el-dialog title="图片上传" v-model="imageDialog" width="900px">
      <cropper-image-upload
        :imgUrl="imgUrl"
        @uploadImgSuccess="uploadImgSuccessHandler"
      ></cropper-image-upload>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import { defineComponent, toRefs } from "vue";
import userInteractionFun from "./composables/userInteractionFun";

export default defineComponent({
  setup(props, { attrs, emit }) {
    const { imgUrl } = toRefs(attrs);
    const {
      imageDialog,
      maskShow,
      clearImg,
      chooseImage,
      mouseenterHandler,
      mouseleaveHandler,
    } = userInteractionFun(emit);
    const uploadImgSuccessHandler = function (state: string) {
      emit("update:imgUrl", state);
    };
    return {
      imgUrl,
      imageDialog,
      maskShow,
      clearImg,
      chooseImage,
      mouseenterHandler,
      mouseleaveHandler,
      uploadImgSuccessHandler,
    };
  },
});
</script>
<style lang="stylus" scoped>
.cropper-image-upload-page {
  .cropper-image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 180px;
    height: 90px;
    cursor: pointer;
    border: 1px dashed rgb(230, 230, 230);

    >i {
      font-size: 28px;
    }

    >img {
      width: 100%;
      height: 100%;
    }

    .mask {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 999;
      background: rgba(0, 0, 0, 0.25);
      width: 100%;
      height: 100%;

      i {
        color: #fff;
        font-size: 18px;
      }
    }
  }
}
</style>

